<!-- 区域详情信息 -->
<template>
  <div>
    <a-drawer
			:title="$t('Area-detail')" 
			:visible="drawerVisible"
      width="45%"
			:body-style="drawerBodyStyle"
			@close="handleCancel"
			:maskClosable="false"
		>
      <!-- 基本信息 -->
      <div class="info-title">{{$t('Base_info')}}</div>
      <a-row :gutter="25">
        <a-col :span="12">
          <div v-for="(item, index) in detailInfo" :key="index" class="info-item">
            <div>{{$store.state.language=='zh' ? item.ch_title : item.en_title}}</div>
            <div v-if="item.ch_title == 'access_key：' || item.ch_title == 'secret_key：'">
              <span v-show="!item.isShow">{{HIDE_STRING}}</span>
              <span v-show="item.isShow">{{item.value}}</span>
              <!-- <i
                class="view-icon"
                :class="item.isShow ? 'icon icon-unlooked16l' : 'icon icon-look16l'"
                @click="changeViewStatus(item)"
              ></i> -->
              <Iconfont class="icon view-icon" :type="item.isShow ? 'icon-unlooked16l' : 'icon-look16l'" @click="changeViewStatus(item)"></Iconfont>
            </div>
            <div v-else>{{item.value}}</div>
          </div>
        </a-col>
        <a-col :span="12">
          <!-- 终端 -->
          <div>{{$t('Terminal')}}：</div>
          <div class="terminal-box">
            <template v-if="terminalInfo.length!=0">
              <p v-for="(item, index) in terminalInfo" :key="index">{{item}}</p>
            </template>
            <template v-else>
              <div class="empty-data-box">
                <EmptyData />
              </div>
            </template>
          </div>
        </a-col>
      </a-row>
      <!-- 数据存储池 -->
      <div>
        <div class="info-title">{{$t('存储池关联')}}</div>
        <div style="margin:10px 0" v-userAuth="'D21-2'">
          <a-button type="primary" @click="addStoreArea">
            <!-- <i class="icon icon-new16f button-icon-style"></i> -->
            <!-- <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont> -->
            {{$t('Add-new') + $t('存储池关联')}}
          </a-button>
        </div>
        <a-table 
          :columns="storeAreaColumns"
          :loading="storeAreaTableLoading"
          :dataSource="storeAreaData"
          size="small"
          :pagination="pagination"
          rowKey="id" 
          :locale="defaultSetting"
          :scroll="{ y: 160 }"
          :rowClassName="(record, i) => i%2 === 1 ? 'table-even-row' : 'table-odd-row' "
          bordered
        >
          <template slot="compression" slot-scope='text, record'>
            {{ text ? text : '-' }}
          </template>
          <template slot="operation" slot-scope='text, record'>
            <!-- <a-tooltip placement='top' v-userAuth="'D21-2'">
              <template slot='title'>
                <span>{{$t('Edit')}}</span>
              </template>

            <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="editStoreArea(record)"></Iconfont>
            </a-tooltip> -->
            <a-tooltip placement='top' v-userAuth="'D21-2'">
              <template slot='title'>
                <span>{{$t('Delete')}}</span>
              </template>
              <!-- <i
                class="icon icon-delete16f table-operation-icon"
                @click="delStoreArea(record)"
              ></i> -->
              <Iconfont class="icon table-operation-icon" type="icon-delete16f" @click="delStoreArea(record)"></Iconfont>
            </a-tooltip>
          </template>
        </a-table>
      </div>
      
      <!-- <div class="draw-bottom-btn">
		  	<a-button :style="{ marginRight: '8px' }" @click="handleCancel" style="width:80px">
		  		{{$t('Cancel')}}
		  	</a-button>
		  	<a-button type="primary" @click="handleCancel" style="width:80px">
		  		{{$t('Sure')}}
		  	</a-button>
		  </div> -->
    </a-drawer>

    <!-- 验证登录密码 -->
    <VerifyPassword 
      :visible="verifyModal"
      :targetArea="targetArea"
      :keyType="keyType"
      @closeOperateModal="closeOperateModal"
      @toShowKey="toShowKey"
    />

    <!-- 新增存储区域 -->
    <AddStoreArea 
      :visible="addStoreAreaModal"
      :targetArea="targetArea"
      :COMPRESS_TYPE="COMPRESS_TYPE"
      :allStoreArea="allStoreArea"
      :storeAreaToLabel="storeAreaToLabel"
      :poolData="poolData"
      :listPoolData="listPoolData"
      :getPoolLoading="getPoolLoading"
      @updateStoreArea="getAllStoreArea"
      @closeOperateModal="closeOperateModal"
    />

    <!-- 编辑存储区域 -->
    <EditStoreArea 
      :visible="editStoreAreaModal"
      :targetArea="targetArea"
      :targetStoreArea="targetStoreArea"
      :COMPRESS_TYPE="COMPRESS_TYPE"
      :poolData="poolData"
      :listPoolData="listPoolData"
      :getPoolLoading="getPoolLoading"
      @updateStoreArea="getAllStoreArea"
      @closeOperateModal="closeOperateModal"
    />

    <!-- 删除存储区域 -->
    <DelStoreArea 
      :visible="delStoreAreaModal"
      :targetArea="targetArea"
      :targetStoreArea="targetStoreArea"
      @updateStoreArea="getAllStoreArea"
      @closeOperateModal="closeOperateModal"
    />
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import VerifyPassword from '@/views/storage_mgr/object/areaOperate/VerifyPassword'
import AddStoreArea from '@/views/storage_mgr/object/areaOperate/AddStoreArea'
import EditStoreArea from '@/views/storage_mgr/object/areaOperate/EditStoreArea'
import DelStoreArea from '@/views/storage_mgr/object/areaOperate/DelStoreArea'

export default {
  name: "AreaDetail",
  components: { 
    VerifyPassword, AddStoreArea, EditStoreArea, DelStoreArea,
    EmptyData
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetArea: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },

  data() {
    return {
      drawerVisible: false,
      drawerBodyStyle: {
        paddingBottom: '40px !important',
      },
      detailInfo: [
        {ch_title:'区域名称：', en_title: 'Area name:', value: '-'},
        {ch_title:'区域ID：', en_title: 'Zone ID:', value: '-'},
        {ch_title:'区域组名称：', en_title: 'Regional Group Name:', value: '-'},
        {ch_title:'区域组ID：', en_title: 'Area Group ID:', value: '-'},
        {ch_title:'领域名称：', en_title: 'Field Name:', value: '-'},
        {ch_title:'领域ID：', en_title: 'Domain ID:', value: '-'},
        {ch_title:'access_key：', en_title: 'access_key:', value: '-', isShow: false},
        {ch_title:'secret_key：', en_title: 'secret_key:', value: '-', isShow: false},
      ],
      verifyModal: false,
      modalType: new Map([
        ['verify-pwd', () => { this.verifyModal = false; }],
        ['add-store-area', () => { this.addStoreAreaModal = false; }],
        ['edit-store-area', () => { this.editStoreAreaModal = false; }],
        ['del-store-area', () => { this.delStoreAreaModal = false; }],
      ]),
      keyType: '',
      HIDE_STRING: '********',
      defaultSetting: {emptyText:<EmptyData />},
      pagination: {
        defaultPageSize:5,
        showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
        showSizeChanger:true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange: (page, pageSize) =>  {this.selectedRowKeys = []; this.target = '';},
        buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
        // onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
      },
      storeAreaTableLoading: false,
      storeAreaColumns: [
        //存储区域
        {title: this.$t('Storage-area'), dataIndex:'name', key:'name', ellipsis: true},
        // 存储标签
        {title: this.$t('Store-label'), dataIndex:'storage_class', key:'storage_class', ellipsis: true},
        // 存储池
        {title: this.$t('Pool'), dataIndex:'data_pool', key:'data_pool', ellipsis: true},
        // 压缩类型
        {title: this.$t('Compress-type'), dataIndex:'compression', key:'compression', scopedSlots:{customRender:'compression'}, ellipsis: true},
        {title: this.$t('Operate'), key:'operation', ellipsis: true, scopedSlots:{customRender:'operation'}, width:90},
      ],
      storeAreaData: [],
      addStoreAreaModal: false,
      editStoreAreaModal: false,
      delStoreAreaModal: false,
      targetStoreArea: {},
      COMPRESS_TYPE: ['lz4', 'snappy', 'zlib', 'zstd'],
      terminalInfo: [],
      verifyOk: false,
      storeAreaToLabel: {},
      allStoreArea: [],
      poolData: [],
      getPoolLoading: false,
      listPoolData: []
    }
  },

  watch: {
    visible(newValue) {
      this.initBaseInfo();
      this.getTerminalInfo();
      this.getAllStoreArea();
      this.getLabelAndArea();
      this.getPoolData();
      this.drawerVisible = newValue;
      this.storeAreaColumns = [
        {title: this.$t('Storage-area'), dataIndex:'name', key:'name', ellipsis: true},
        // 存储标签
        {title: this.$t('Store-label'), dataIndex:'storage_class', key:'storage_class', ellipsis: true},
        // 存储池
        {title: this.$t('Pool'), dataIndex:'data_pool', key:'data_pool', ellipsis: true},
        // 压缩类型
        {title: this.$t('Compress-type'), dataIndex:'compression', key:'compression', scopedSlots:{customRender:'compression'}, ellipsis: true},
        {title: this.$t('Operate'), key:'operation', ellipsis: true, scopedSlots:{customRender:'operation'}, width:90},
      ]
    },
  },

  methods: {
    initBaseInfo() {
      this.detailInfo[0].value = this.targetArea.zone_name; // 区域名称
      this.detailInfo[1].value = this.targetArea.zone_id; // 区域id
      this.detailInfo[2].value = this.targetArea.zonegroup_name // 区域组名称
      this.detailInfo[3].value = this.targetArea.zonegroup_id; // 区域组id
      this.detailInfo[4].value = this.targetArea.realm_name // 领域名称
      this.detailInfo[5].value = this.targetArea.realm_id; // 领域id
      // this.detailInfo[6].value = this.targetArea. // access_key
      // this.detailInfo[7].value = this.targetArea. // secret_key
    },

    // 获取所有存储区域
    async getAllStoreArea() {
      this.storeAreaTableLoading = true;
      const params = { zone_id:this.targetArea.zone_id };
      const res = await this.$api.areaManage.getAllStoreAreaRequest(params);
      console.log('所有存储区域', res)
      if(res && res.data && res.data.flag !== 1) {
        this.storeAreaData = res.data;
        this.listPoolData = [];
        res.data.forEach(item => {
          if(item.data_pool.indexOf('.') === -1) {
            console.log(item.data_pool)
            this.listPoolData.push(item.data_pool);
          }
        })
      }
      this.storeAreaTableLoading = false;
    },

    // 获取区域的终端信息
    async getTerminalInfo() {
      const params = { zone_id:this.targetArea.zone_id };
      const res = await this.$api.areaManage.getTerminalInfoRequest(params);
      // console.log('获取区域的终端信息', res)
      if(res && res.data) {
        this.terminalInfo = res.data
      }
    },

    // 获取存储标签和存储区域
    async getLabelAndArea() {
      const params = { zonegroup_id: this.targetArea.zonegroup_id }
      const res = await this.$api.areaManage.getLabelAndAreaRequest(params);
      if(res && res.data) {
        // console.log('获取存储标签和存储区域', res)
        let obj = {}; //代表相应存储区域所拥有的存储标签
        let arr = [];
        res.data.forEach(item => {
          obj[item.placement_name] = item.storage_classes;
          arr.push(item.placement_name);
        })
        this.storeAreaToLabel = {...obj};
        this.allStoreArea = [...arr];
      }
    },

    // 获取新增所需要的池
    async getPoolData() {
      this.getPoolLoading = true;
      const res = await this.$api.areaManage.getPoolRequest({ applications:["rgw"] });
      console.log('获取存储池', res)
      if(res && res.data) {
        this.poolData = [];
        res.data.forEach(item => {
          if(item.poolname.indexOf('.') === -1) {
            console.log(item.poolname)
            this.poolData.push(item.poolname);
          }
        });
      }
      this.getPoolLoading = false;
    },

    //改变key的显示
    changeViewStatus(item) {
      if(item.ch_title == 'access_key：') {
        this.keyType = "access_key";
      }else if(item.ch_title == 'secret_key：') {
        this.keyType = "secret_key";
      }
      if(!item.isShow && !this.verifyOk) {
        this.verifyModal = true;
      }else {
        item.isShow = !item.isShow;
      }
      // this.detailInfo[6].value = 'aaa';
      // this.detailInfo[6].isShow = ;
    },

    //显示key明文
    toShowKey({ access_key, secret_key }) {
      this.verifyOk = true;
      this.detailInfo[6].value = access_key;
      this.detailInfo[7].value = secret_key;
      this.detailInfo[6].isShow = true;
      this.detailInfo[7].isShow = true;
    },

    //新增存储区域
    addStoreArea() {
      this.addStoreAreaModal = true;
    },

    //编辑存储区域
    editStoreArea(record) {
      this.targetStoreArea = record;
      this.editStoreAreaModal = true;
    },
    
    //删除存储区域
    delStoreArea(record) {
      this.targetStoreArea = record;
      this.delStoreAreaModal = true;
    },

    //关闭操作弹窗
    closeOperateModal(type) {
      let action = this.modalType.get(type);
      action.call(this);
    },

    //关闭详情弹窗
    handleCancel() {
      this.$emit('closeModal', 'area-detail');
      this.detailInfo[6].isShow = false;
      this.detailInfo[7].isShow = false;
      this.verifyOk = false;
    },
  },
}
</script>
<style scoped>
  .draw-bottom-btn {
		/* float: right;
		padding-bottom: 20px; */
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 4px 4px;
	}
  .info-item {
    margin-bottom: 5px;
  }
  .info-title {
    color: #333;
    font-size: 14px;
    font-weight: 700;
  }
  .view-icon {
    float: right;
    cursor: pointer;
  }
  .terminal-box {
    height: 350px;
    padding: 10px;
    background-color: #edf0f2;
    box-sizing: border-box;
    overflow: auto;
  }
  .empty-data-box {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* ::v-deep.ant-table-body {
    overflow: auto !important;
  } */
</style>